<template>
    <div class="margin-side" style="width: 60% ;">
        <a-typography-title>{{ article.title }}</a-typography-title>

        <a-divider :margin="4" />
        <a-row class="grid-demo" :gutter="24">
            <a-col :span="6">
                <div style="margin: 20%; text-align: center;">
                    <a-avatar :size="128">
                        <img alt="avatar" :src="author.picture" />
                    </a-avatar>

                    <div style="margin-top: 5px;">
                        <a-typography-text>{{ author.username }}</a-typography-text>
                    </div>
                    <div style="margin-top: 10px;">
                        <a-button>关注</a-button>
                    </div>
                </div>
            </a-col>
            <a-col :span="2">
                <div class="Icon-box" style="margin-top: 30px;">
                    <div class="up">
                        <a-typography-text>
                            <IconCaretUp :size="40" />
                        </a-typography-text>
                    </div>
                    <div class="star">
                        <a-typography-text>
                            <IconStar :size="40" />
                        </a-typography-text>
                    </div>
                    <div class="down">
                        <a-typography-text>
                            <IconCaretDown :size="40" />
                        </a-typography-text>
                    </div>
                </div>
            </a-col>
            <a-col :span="16">
                <a-typography-text>
                    <p style="white-space: pre-wrap;">{{ article.content }}</p>
                </a-typography-text>

            </a-col>
        </a-row>

        <a-divider></a-divider>
        <!-- 评论 -->
        <div v-for="item in   comment  " :key="item">
            <a-row class="grid-demo" :gutter="24">
                <a-col :span="6">
                    <div style="margin: 5%; text-align: center;">
                        <a-avatar :size="128">
                            <img alt="avatar" :src="item.authorPicture" />
                        </a-avatar>

                        <div style="margin-top: 10px;">
                            <a-typography-text>{{ item.author }}</a-typography-text>
                        </div>

                        <div style="margin-top: 10px;">
                            <a-button>关注</a-button>
                        </div>
                    </div>
                </a-col>
                <a-col :span="1">

                </a-col>
                <!-- <a-divider direction="vertical" :size="-20" /> -->
                <!-- 评论渲染列表 -->
                <a-col :span="16">
                    <div style="margin: 5%;"></div>
                    <a-typography-text>
                        <p style="white-space: pre-wrap;">{{ item.content }}</p>
                    </a-typography-text>
                </a-col>
            </a-row>
            <a-divider></a-divider>
        </div>



        <!-- 发送评论文本域 -->
        <!-- <a-comment align="right" :avatar="$store.state.user.picture">
            <template #actions>
                <a-button key="1" type="primary"> 评论 </a-button>
            </template>
            <template #content>
                <a-textarea v-model="form.content" placeholder="请输入文章正文" :style="{ minHeight: '360px' }" :auto-size="true"
                    :max-length="1800" :show-word-limit="true" />
            </template>
        </a-comment> -->
        <a-textarea placeholder="请输评论" :style="{ minHeight: '160px' }" v-model="submit_comment" :auto-size="true"
            :max-length="500" :show-word-limit="true" />

        <div style="margin-top: 20px;"></div>
        <div style="margin-left: 40%;">
            <a-button :style="{ width: '320px' }" @click="submit()" type="primary">评论</a-button>
        </div>
    </div>
</template>

<script>
import { reactive } from 'vue'
import { useRoute } from 'vue-router';
import http from '../../main'
import { IconCaretDown, IconCaretUp, IconStar } from '@arco-design/web-vue/es/icon';
import { ref } from 'vue';
import store from '@/store';
import { Message } from '@arco-design/web-vue';
export default {
    components: {
        IconCaretDown, IconCaretUp, IconStar
    },
    data() {
        return {
            comments: []
        }
    },
    mounted() {

    },
    setup() {
        const route = useRoute();
        const ArticleId = route.params.id;


        let article = reactive({
            id: '', title: '', content: '', createtime: '',
            up: '', down: '', stars: '', articleCategory: ''
        });

        let author = reactive({
            username: '',
            picture: '',
        })

        let comment = ref();

        let submit_comment = ref();

        // 获取当前文章数据
        const getArticle = () => {
            http.get('/articles/' + parseInt(ArticleId))
                .then(res => {
                    article.title = res.data.data.title;
                    article.content = res.data.data.content;

                    // 请求作者信息
                    console.log(res.data.data.authorId)
                    http.get('/users/' + parseInt(res.data.data.authorId))
                        .then(res => {
                            author.picture = res.data.picture;
                            author.username = res.data.name;
                        })
                })

        }
        getArticle();

        // 获取文章的评论数据
        const getComment = () => {
            http.get('/comments/' + parseInt(ArticleId))
                .then(res => {
                    comment.value = res.data;
                    console.log(res.data)
                })
        }
        getComment();

        const submit = () => {
            if (submit_comment.value != null) {
                console.log("submit");
                http.post('/comments/sendComment', {
                    "attachArticle": parseInt(ArticleId),
                    "commenterId": store.state.user.id,
                    "content": submit_comment.value,
                    "createtime": "null",
                    "id": 0
                })
                    .then(() => {
                        Message.success({
                            content: "评论成功！"
                        })
                        getComment();   // 刷新评论
                    })
                    .catch(() => {
                        Message.error({
                            content: "服务异常！"
                        })
                    })
            }
        }
        return {
            article, author, ArticleId, comment, submit, submit_comment
        }
    }
}
</script>

<style></style>
